/**
 * @Author: zkz
 * @CreateTime: 2021-10-14 16:23:59
 * @Description: 登录页面
 */
import './index.scss'
import {Button,Form,Input,Card,message} from 'antd'
import logo from '@/assets/img/logo.png'
import { useDispatch } from 'react-redux'
import { fetchLogin } from '@/store/modules/user'
import { useNavigate } from 'react-router-dom'
const Login = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    /**
     * 登录
     * @param {*} values 
     */
    const onFinish = async (values) => {
        console.log(values);
        // 触发action 获取token
       await dispatch(fetchLogin(values))
       //跳转到首页
        navigate('/')
        //提示
        message.success('登录成功')
    }   
    return (<div className='login'>
        <Card className="login-container"> 
            <img src={logo} alt="logo" className="login-logo" />
            <Form 
            onFinish={onFinish}
            validateTrigger={'onBlur'}
            >
                <Form.Item
                name={'mobile'}
                   rules={[{ required: true, message: '请输入手机号!' },{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式！' }]}
                >
                    <Input size='large' placeholder="请输入手机号"/>
                </Form.Item>
                <Form.Item
                name={'code'}
                   rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Input size='large' placeholder="请输入验证码"/>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" size="large" htmlType="submit" block>登录</Button>
                </Form.Item>
            </Form>
        </Card>
    </div>);
}

export default Login;